<template>
  <el-form :inline="true" :model="shopForm" class="demo-form-inline">
    <el-form-item label="标题:">
      <el-input v-model="shopForm.title" placeholder="请输入要查询的标题" clearable/>
    </el-form-item>
    <el-form-item label="发布时间:">
      <div class="block">
        <el-date-picker
            v-model="shopForm.publishDateStart"
            type="datetime"
            placeholder="请输入起始时间"
            value-format="YYYY-MM-DD HH:mm:ss"
        />
      </div>-
      <div class="block">
        <el-date-picker
            v-model="shopForm.publishDateEnd"
            type="datetime"
            placeholder="请输入结束时间"
            value-format="YYYY-MM-DD HH:mm:ss"
        />
      </div>
    </el-form-item>
    <el-form-item label="类型">
      <el-select
          v-model="shopForm.typeIds"
          multiple
          placeholder="Select"
          style="width: 240px"
      >
        <el-option
            v-for="item in uu"
            :key="item.id"
            :label="item.name"
            :value="item.id"
        />
      </el-select>
    </el-form-item>
    <el-button @click="show()" type="primary">查询</el-button>
  </el-form>

  <el-table :data="tableData" style="width: 100%">
    <el-table-column prop="title" label="标题" width="140"/>
    <el-table-column prop="image" label="图片" width="140" >
      <template #default="scope">
        <img v-if="scope.row.images.length == 0" :src="scope.row.image" style="width: 50px;height: 50px"/>
        <img v-if="scope.row.images.length != 0" :src="scope.row.images[0]" style="width: 50px;height: 50px"/>
      </template>
    </el-table-column>
    <el-table-column prop="publishDate" label="发布日期" width="180"/>
    <el-table-column label="类型" width="140" #default="scope">
      <p v-for="index of scope.row.channelNames">
        {{ index.name }}
      </p>
    </el-table-column>
    <el-table-column prop="content" label="文字内容" width="140" show-overflow-tooltip/>
    <el-table-column prop="status" label="状态" width="140">
      <template #default="scope">
        <el-button link type="primary" v-if="scope.row.status==2">下架</el-button>
        <el-button link type="danger" v-if="scope.row.status==4">一级审核失败</el-button>
        <el-button link type="success" v-if="scope.row.status==5">一级审核通过</el-button>
      </template>
    </el-table-column>
    <el-table-column label="操作" width="280">
      <template #default="scope">
        <el-button type="info" @click="selectDetails(scope.row.id)">查看详情</el-button>
        <el-button type="warning" @click="deleteFiles(scope.row.id)">删除</el-button>
      </template>

    </el-table-column>

  </el-table>
  <el-pagination
      v-model:current-page="shopForm.pageNum"
      v-model:page-size="shopForm.pageSize"
      :page-sizes="[10, 20, 30, 40]"
      layout="total, sizes, prev, pager, next, jumper"
      :total="shopForm.total"
      @size-change="handleSizeChange"
      @current-change="handleCurrentChange"
  />
</template>
<script setup>
import {ref, reactive} from "vue";

import {ElMessage} from "element-plus";
import {filesSearchJs, delect, detalisSelectJs} from "../api/files/files.js";
import {channelListJs} from "../api/channel/channel.js";
import router from "../router/index.js";
import CryptoJS from 'crypto-js';

const shopForm = ref({
  pageNum: 1,
  pageSize: 5,
  total: 0,
  title: null,
  publishDateStart:null,
  publishDateEnd:null,
  typeIds:[],
})
const handleSizeChange = (val) => {
  shopForm.value.pageSize = val
  show()
}
const handleCurrentChange = (val) => {
  shopForm.value.pageNum = val
  show()
}
const tableData = ref([])


// 获取token
const token = localStorage.getItem("token");

// 查询全部
function show() {
  filesSearchJs(shopForm.value).then(res => {
    tableData.value = res.data.data.records
    console.log(res.data)
    shopForm.value.total = parseInt(res.data.data.total)
  })
}

show()

const dialogVisible = ref(false)

const ruleForm = ref({})
const rules = reactive({
  shopName: [
    {required: true, message: 'Please input Activity name', trigger: 'blur'},
    {min: 1, message: '长度最小为1', trigger: 'blur'},
  ],
  business: [
    {required: true, message: 'Please input Activity name', trigger: 'blur'},
    {min: 1, message: '长度最小为1', trigger: 'blur'},
  ],
})

// 上传图片
const imageUrl = ref('')
const handleAvatarSuccess = (response, uploadFile) => {
  imageUrl.value = URL.createObjectURL(uploadFile.raw);
  console.log(response)
  ruleForm.value.image = response.data;
  console.log(response)
};


const beforeAvatarUpload = (rawFile) => {
  if (rawFile.type !== 'image/jpeg') {
    ElMessage.error('Avatar picture must be JPG format!');
    return false;
  } else if (rawFile.size / 1024 / 1024 > 2) {
    ElMessage.error('Avatar picture size can not exceed 2MB!');
    return false;
  }
  return true;
};


// 档案类型查询
const options = ref([])
function typesList() {
  channelListJs().then(res => {
    if (res.data.code == 200) {
      options.value = res.data.data
    }
  })
}
typesList()

// 档案删除
function deleteFiles(id) {
  delect(id).then(res => {
    if (res.data.code == 200) {
      ElMessage.success("删除成功")
    } else {
      ElMessage.success("删除失败")
    }
  })
}

// 查看详情
function selectDetails(val){
  // 加密秘钥
  const secretKey = 'mySecretKey123';
  var valJSON = JSON.stringify(val);
  const encryptedParams = CryptoJS.AES.encrypt(valJSON, secretKey).toString();
  // 路由传参
  router.push({
    path:"/detalis",
    query:{
      val:encryptedParams
    }
  })
}

</script>